<?php
use_helper('I18N');
?>
<!DOCTYPE html>
<html>
<head>
    <title>SOCRATES FX</title>
    <link href="/light-blue/css/application.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <!-- jquery and friends -->
    <script src="/light-blue/lib/jquery/jquery.1.9.0.min.js"> </script>
    <script src="/light-blue/lib/jquery/jquery-migrate-1.1.0.min.js"> </script>

    <script type='text/javascript' src='/js/jquery/jquery-ui-1.8.11.custom.min.js'></script>
    <link rel='stylesheet' href='/css/smoothness/jquery-ui-1.8.18.custom.css' type='text/css'/>
    <!-- jquery plugins -->
    <script src="/light-blue/lib/jquery-maskedinput/jquery.maskedinput.js"></script>
    <script src="/light-blue/lib/parsley/parsley.js"> </script>
    <script src="/light-blue/lib/icheck.js/jquery.icheck.js"></script>
    <script src="/light-blue/lib/select2.js"></script>
    <script src="/light-blue/lib/jquery.autogrow-textarea.js"></script>

    <!--backbone and friends -->
    <script src="/light-blue/lib/backbone/underscore-min.js"></script>
    
    <!-- bootstrap default plugins -->
    <script src="/light-blue/lib/bootstrap/transition.js"></script>
    <script src="/light-blue/lib/bootstrap/collapse.js"></script>
    <script src="/light-blue/lib/bootstrap/alert.js"></script>
    <script src="/light-blue/lib/bootstrap/tooltip.js"></script>
    <script src="/light-blue/lib/bootstrap/popover.js"></script>
    <script src="/light-blue/lib/bootstrap/button.js"></script>
    <script src="/light-blue/lib/bootstrap/dropdown.js"></script>
    <script src="/light-blue/lib/bootstrap/modal.js"></script>
    
    <!-- bootstrap custom plugins -->
    <script src="/light-blue/lib/bootstrap-datepicker.js"></script>
    <script src="/light-blue/lib/bootstrap-select/bootstrap-select.js"></script>
    <script src="/light-blue/lib/wysihtml5/wysihtml5-0.3.0_rc2.js"></script>
    <script src="/light-blue/lib/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
    <script src="/light-blue/lib/bootstrap-switch.js"></script>
    <script src="/light-blue/lib/bootstrap-colorpicker.js"></script>
    
    <!-- basic application js-->
    <script src="/light-blue/js/app.js"></script>
    <script src="/light-blue/js/settings.js"></script>

    <!-- page specific -->
    <script src="/light-blue/js/forms-elemets.js"></script>

    <script src="/assets/js/jquery.validate.min.js"></script>
    <link rel='stylesheet' type='text/css' media='screen' href='/css/validate/validate.css'/>

    <script type='text/javascript' src='/js/jquery/jquery.dataTables.js'></script>
    <script type='text/javascript' src='/js/jquery/jquery.r9jason.dataTables.extend.js'></script>
    <script type='text/javascript' src='/js/jquery/autoNumeric-1.7.1.js'></script>
    <script type='text/javascript' src='/js/jquery/jquery.r9jason.extend.js'></script>
    <link rel='stylesheet' type='text/css' media='screen' href='/light-blue/css/datatable.css'/>

    <style>
        label.error {
            color: #FFD700 !important;
        }
        .form-control[disabled], textarea[disabled], input[type="text"][disabled], input[type="password"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="date"][disabled], input[type="month"][disabled], input[type="time"][disabled], input[type="week"][disabled], input[type="number"][disabled], input[type="email"][disabled], input[type="url"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="color"][disabled], .uneditable-input[disabled], .form-control[readonly], fieldset[disabled] .form-control,
        .form-control[readonly], textarea[readonly], input[type="text"][readonly], input[type="password"][readonly], input[type="datetime"][readonly], input[type="datetime-local"][readonly], input[type="date"][readonly], input[type="month"][readonly], input[type="time"][readonly], input[type="week"][readonly], input[type="number"][readonly], input[type="email"][readonly], input[type="url"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="color"][readonly], .uneditable-input[readonly], fieldset[readonly] .form-control {
            background-color: #EEEEEE;
            cursor: not-allowed;
        }
    </style>
</head>
<body class="background-dark">
<div class="logo">
    <h4><a href="/member/summary">SOCRATES <strong>FX</strong></a></h4>
</div>

<?php include_component('component', 'submenu', array('param' => $sf_user->getAttribute(Globals::SESSION_DISTID, 0))) ?>

<div class="wrap">
    <header class="page-header">
        <div class="navbar">
                <ul class="nav navbar-nav navbar-right pull-right">
                    <li class="visible-phone-landscape">
                        <a href="#" id="search-toggle">
                            <i class="icon-search"></i>
                        </a>
                    </li>
                    <li class="dropdown" style="display: none">
                        <a href="#" title="Languages" id="messages"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                           <i class="eicon-language"></i>
                        </a>
                        <ul id="messages-menu" class="dropdown-menu messages" role="menu">
                            <li role="presentation">
                                <a href="/home/language?lang=cn" class="message">
<!--                                    <img src="/light-blue/img/1.jpg" alt="">-->
                                    <div class="details">
                                        <div class="sender">中文</div>
                                        <div class="text">
<!--                                            Hey, John! How is it going? ...-->
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="/home/language?lang=en" class="message">
<!--                                    <img src="/light-blue/img/2.jpg" alt="">-->
                                    <div class="details">
                                        <div class="sender">English</div>
                                        <!--<div class="text">
                                            I'll definitely buy this template
                                        </div>-->
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <!--<a href="#" class="text-align-center see-all">
                                    See all messages <i class="icon-arrow-right"></i>
                                </a>-->
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" title="8 support tickets"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                            <i class="icon-group"></i>
                            <span class="count">0</span>
                        </a>
                        <ul id="support-menu" class="dropdown-menu support" role="menu">
                            <!--<li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-important"><i class="icon-bell-alt"></i></span>
                                    </div>
                                    <div class="details">
                                        Check out this awesome ticket
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-warning"><i class="icon-question-sign"></i></span>
                                    </div>
                                    <div class="details">
                                        "What is the best way to get ...
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-success"><i class="icon-tag"></i></span>
                                    </div>
                                    <div class="details">
                                        This is just a simple notification
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-info"><i class="icon-info-sign"></i></span>
                                    </div>
                                    <div class="details">
                                        12 new orders has arrived today
                                    </div>
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#" class="support-ticket">
                                    <div class="picture">
                                        <span class="label label-important"><i class="icon-plus"></i></span>
                                    </div>
                                    <div class="details">
                                        One more thing that just happened
                                    </div>
                                </a>
                            </li>-->
                            <li role="presentation">
                                <a href="#" class="text-align-center see-all">
                                    See all tickets <i class="icon-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li class="hidden-xs">
                        <a href="#" id="settings"
                           title="Settings"
                           data-toggle="popover"
                           data-placement="bottom">
                            <i class="icon-cog"></i>
                        </a>
                    </li>
                    <li class="hidden-xs dropdown">
                        <a href="#" title="Account" id="account"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                            <i class="icon-user"></i>
                        </a>
                        <ul id="account-menu" class="dropdown-menu account" role="menu">
                            <li role="presentation" class="account-picture">
                                <img src="/light-blue/img/2.jpg" alt="">
                                <?php echo $sf_user->getAttribute(Globals::SESSION_USERNAME)?>
                            </li>
                            <li role="presentation">
                                <a href="/member/viewProfile" class="link">
                                    <i class="icon-user"></i>
                                    Profile
                                </a>
                            </li>
                            <!--<li role="presentation">
                                <a href="component_calendar.html" class="link">
                                    <i class="icon-calendar"></i>
                                    Password Settings
                                </a>
                            </li>-->
                            <li role="presentation">
                                <a href="/member/passwordSetting" class="link">
                                    <i class="icon-lock"></i>
                                    Password Settings
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="visible-xs">
                        <a href="#"
                           class="btn-navbar"
                           data-toggle="collapse"
                           data-target=".sidebar"
                           title="">
                            <i class="icon-reorder"></i>
                        </a>
                    </li>
                    <li class="hidden-xs"><a href="<?php echo url_for("/home/logout")?>"><i class="icon-signout"></i></a></li>
                </ul>
                <form id="search-form" class="navbar-form pull-right" role="search">
                    Welcome, <strong><?php echo $sf_user->getAttribute(Globals::SESSION_USERNAME)?></strong>
<!--                    <input type="search" class="search-query" placeholder="Search...">-->
                </form>
        </div>
    </header>
    <div class="content container">
        <?php echo $sf_data->getRaw('sf_content') ?>
    </div>
</div>

<script type="text/template" id="settings-template">
    <div class="setting clearfix">
        <div>Background</div>
        <div id="background-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% dark = background == 'dark'; light = background == 'light';%>
            <button type="button" data-value="dark" class="btn btn-sm btn-transparent <%= dark? 'active' : '' %>">Dark</button>
            <button type="button" data-value="light" class="btn btn-sm btn-transparent <%= light? 'active' : '' %>">Light</button>
        </div>
    </div>
    <div class="setting clearfix">
        <div>Sidebar on the</div>
        <div id="sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% onRight = sidebar == 'right'%>
            <button type="button" data-value="left" class="btn btn-sm btn-transparent <%= onRight? '' : 'active' %>">Left</button>
            <button type="button" data-value="right" class="btn btn-sm btn-transparent <%= onRight? 'active' : '' %>">Right</button>
        </div>
    </div>
    <div class="setting clearfix">
        <div>Sidebar</div>
        <div id="display-sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% display = displaySidebar%>
            <button type="button" data-value="true" class="btn btn-sm btn-transparent <%= display? 'active' : '' %>">Show</button>
            <button type="button" data-value="false" class="btn btn-sm btn-transparent <%= display? '' : 'active' %>">Hide</button>
        </div>
    </div>
</script>

<script type="text/template" id="sidebar-settings-template">
    <% auto = sidebarState == 'auto'%>
    <% if (auto) {%>
    <button type="button"
            data-value="icons"
            class="btn-icons btn btn-transparent btn-sm eicon-switch"></button>
    <button type="button"
            data-value="auto"
            class="btn-auto btn btn-transparent btn-sm eicon-resize-full"></button>
    <%} else {%>
    <button type="button"
            data-value="auto"
            class="btn btn-transparent btn-sm eicon-resize-full"></button>
    <% } %>
</script>

<script type='text/javascript' src='/js/jquery/jquery.blockUI.js'></script>
<script type="text/javascript">
function waiting() {
    /*$("#waitingLB h3").html("<h3>Loading...</h3><div id='loader' class='loader'><img id='img-loader' src='/images/loading.gif' alt='Loading'/></div>");*/
    $("#waitingLB h3").html("<h3 style='font-size: 16px; width: 100%; padding-left: 0px; background-color:inherit; color: black; line-height:0px; margin-top: 20px; font-weight: bold;'>Loading...</h3><div id='loader' class='loader'><img id='img-loader' src='/images/loading.gif' alt='Loading'/></div>");

    $.blockUI({
        message: $("#waitingLB")
        , css: {
            border: 'none',
            padding: '5px',
            'background-color': '#fff',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            'border-radius': '10px',
            opacity: .8,
            color: '#000'
    }});
    $(".blockOverlay").css("z-index", 1010);
    $(".blockPage").css("z-index", 1011);
}
function alert(data) {
    var msgs = "";
    if ($.isArray(data)) {
        jQuery.each(data, function(key, value) {
            msgs = value + "<br>";
        });
    } else {
        msgs = data + "<br>";
    }

    var alertPanel = "<div style='padding: 10px; line-height :normal; font-weight: bold; font-size:14px;' class='ui-state-highlight ui-corner-all'><p><span style='float: left; margin-right: .3em;' class='ui-icon ui-icon-info'></span>";
    alertPanel += msgs + "</p></div>";
    $("#waitingLB h3").html(alertPanel);
    $.blockUI({
    message: $("#waitingLB")
    , css: {
        border: 'none',
        padding: '5px',
        '-webkit-border-radius': '10px',
        '-moz-border-radius': '10px',
        'border-radius': '10px',
        opacity: .9
    }});
    $(".blockOverlay").css("z-index", 1010);
    $(".blockPage").css("z-index", 1011);
    $('.blockOverlay').attr('title', 'Click to unblock').click($.unblockUI);
}
function error(data) {
    var msgs = "";
    if ($.isArray(data)) {
        jQuery.each(data, function(key, value) {
            msgs = value + "<br>";
        });
    } else {
        msgs = data + "<br>";
    }

    var errorPanel = "<div style='padding: 10px; line-height :normal; font-weight: bold; font-size:14px;' class='ui-state-error ui-corner-all'>";
    errorPanel += "<p><span style='float: left; margin-right: .3em;' class='ui-icon ui-icon-alert'></span>";
    errorPanel += msgs + "</p></div>";
    $("#waitingLB h3").html(errorPanel);
    $.blockUI({
    message: $("#waitingLB")
    , css: {
        border: 'none',
        padding: '5px',
        '-webkit-border-radius': '10px',
        '-moz-border-radius': '10px',
        'border-radius': '10px',
        opacity: .9
    }});
    $(".blockOverlay").css("z-index", 1010);
    $(".blockPage").css("z-index", 1011);
    $('.blockOverlay').attr('title', 'Click to unblock').click($.unblockUI);
}
</script>
<img src="/images/loading.gif" style="display: none;">
<div id="waitingLB" style="display:none; cursor: default">
    <h3 style="font-size: 16px; width: 100%; padding-left: 0px; background-color:inherit; color: black; line-height:0px; margin-top: 0px">We are processing your request. Please be patient.</h3>
</div>
</body>
</html>